<template>
    <el-container>
        <!-- 头部 -->
        <el-header>
            <div class="words">
                <span
                    @click="menuClick('doctorLayout')"
                    style="font-size: 22px"
                >
                    <i class="iconfont icon-r-love" style="font-size: 26px">
                        灵医疗管理系统</i
                    >
                </span>
            </div>
            <div class="words">
                <span
                    >欢迎您，<b>{{ userName }}</b
                    >&nbsp;医生&nbsp;</span
                >
                <span
                    ><el-button type="danger" size="mini" @click="logout"
                        >退出</el-button
                    ></span
                >
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <!-- 导航菜单 -->
                <el-menu
                    background-color="white"
                    text-color="grey"
                    active-text-color="black"
                    :default-active="activePath"
                    style="font-size: 22px"
                >
                    <el-menu-item
                        index="doctorLayout"
                        @click="menuClick('doctorLayout')"
                        style="font-size: 20px"
                    ><i class="el-icon-s-home" style="font-size: 26px"> </i>
                        首页
                    </el-menu-item>
                    <el-menu-item
                        index="orderToday"
                        @click="menuClick('orderToday')"
                        style="font-size: 20px"
                    >
                        <i class="el-icon-document-checked" style="font-size: 26px"> </i>
                        今日挂号列表
                    </el-menu-item>
                    <el-menu-item
                        index="doctorOrder"
                        @click="menuClick('doctorOrder')"
                        style="font-size: 20px"
                    >
                        <i class="el-icon-s-fold" style="font-size: 26px"> </i>
                        历史挂号列表
                    </el-menu-item>
                    <el-menu-item
                        index="inBed"
                        @click="menuClick('inBed')"
                        style="font-size: 20px"
                    >
                        <i class="el-icon-house" style="font-size: 26px"> </i>
                        住院申请管理
                    </el-menu-item>
                    <el-menu-item
                        index="doctorCard"
                        @click="menuClick('doctorCard')"
                        style="font-size: 20px"
                    ><i class="el-icon-info" style="font-size: 26px"> </i>
                        个人信息查询
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <!-- 子路由入口 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import jwtDecode from "jwt-decode";

import {
    getToken,
    clearToken,
    getActivePath,
    setActivePath,
} from "@/utils/storage.js";
export default {
    name: "Doctor",
    data() {
        return {
            userName: "",
            activePath: "",
        };
    },
    methods: {
        //token解码
        tokenDecode(token) {
            if (token !== null) return jwtDecode(token);
        },
        //导航栏点击事件
        menuClick(path) {
            this.activePath = path;
            setActivePath(path);
            if (this.$route.path !== "/" + path) this.$router.push(path);
            console.log(path);
        },
        //退出登录
        logout() {
            this.$confirm("此操作将退出登录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    clearToken();
                    this.$message({
                        type: "success",
                        message: "退出登录成功!",
                    });
                    this.$router.push("login");
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消",
                    });
                });
        },
    },
    created() {
        //  获取激活路径
        this.activePath = getActivePath();
        // 解码token
        this.userName = this.tokenDecode(getToken()).dName;
    },
    mounted() {
        
    },
};
</script>
<style scoped lang="scss">
/* 全局标题样式 */
.title {
  cursor: pointer;
}

/* 头部样式 - 保持你原有的渐变效果 */
.el-header {
  background-image: linear-gradient(
    to right,
    #003f5c,
    #00547d,
    #007fa4,
    #00aaa0,
    #00c18b,
    #00d072,
    #8fde5d,
    #a8eb12
  );
  display: flex;
  justify-content: space-between;
  align-items: center;
  .words {
    text-align: center;
    span {
      color: white;
    }
  }
  border-bottom: 1px solid lightgrey;
}

/* 容器设置 */
.el-container {
  height: 100vh;
}

/* 侧边栏主样式 */
.el-aside {
  background-color: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
  transition: all 0.3s ease;
}

/* 菜单整体设置 */
.el-menu {
  background-color: transparent !important;
  border-right: none !important;

  /* 菜单项基础样式 */
  .el-menu-item {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    color: #4a5568 !important;
    background-color: transparent !important;
    transition: all 0.2s ease;

    /* 图标样式 */
    .iconfont {
      font-size: 20px;
      margin-right: 8px;
      color: #4a5568;
      vertical-align: middle;
    }

    /* 悬停状态 */
    &:hover {
      background-color: #ebf8ff !important;
      color: #2b6cb0 !important;
      .iconfont {
        color: #2b6cb0;
      }

      /* 激活状态 */
      &.is-active {
        background-color: #ebf8ff !important;
        color: #2b6cb0 !important;
        border-left: 3px solid #2b6cb0;
        font-weight: 500;

        .iconfont {
          color: #2b6cb0;
        }
      }
    }
  }
}
/* 主内容区域样式 */
.el-main {
  background-color: #ffffff;
  padding: 20px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.02);
}
</style>
